<template>
  <el-scrollbar>
    <div
      id="jorLibraryDet"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
    >
      <div class="main" style="display: flex">
        <div class="left-tree">
          <div class="careeTree">
            <div class="careeTreeHead f14">全部职业</div>
            <el-tree
              empty-text="暂无数据"
              v-loading="treeLoading"
              style="max-width: 260px"
              :data="treeData"
              node-key="code"
              :default-expanded-keys="expandedKeys"
              :props="defaultProps"
            >
              <template #default="{ node, data }">
                <div
                  @click="handleTreeName(node, data)"
                  class="custom-tree-node"
                  :class="{
                    treeActive: node.data.code == code,
                  }"
                >
                  {{ node.data.name }}
                </div>
              </template>
            </el-tree>
          </div>
        </div>

        <div class="right-contaier">
          <div class="like-box df">
            <div class="left">
              <h1>{{ route.query.name || '-' }}({{ route.query.code }})</h1>
              <div class="df">
                <div
                  class="mt15 f14"
                  style="color: #999"
                  v-for="(item, index) in foundItem"
                  :key="item.name"
                >
                  {{ item.name
                  }}<span
                    v-if="index !== foundItem.length - 1"
                    style="margin: 0 5px"
                    >>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="tabs-box">
            <div class="tabs">
              <el-tabs v-model="activeName" class="demo-tabs">
                <!-- 职业概述 -->
                <el-tab-pane
                  :label="
                    route.path != '/jorLibrary/jorLibraryDet/jorDet'
                      ? '职业概述'
                      : '岗位概况'
                  "
                  name="zhiyegaishu"
                >
                  <!-- v-if="route.path != '/jorLibrary/jorLibraryDet/jorDet'" -->
                  <div
                    v-if="jorDetailsData.desc"
                    :style="isShow ? 'height:150px' : 'height:100%'"
                    style="
                      overflow: hidden;
                      position: relative;
                      margin-top: 30px;
                    "
                  >
                    <div
                      v-html="jorDetailsData.desc"
                      style="color: #666; white-space: pre-wrap"
                      class="desc f14"
                    ></div>
                    <div
                      class="read-more"
                      v-show="isShow"
                      @click="handleRedaMore"
                    >
                      阅读更多
                    </div>
                    <div
                      v-show="!isShow"
                      class="curr"
                      style="text-align: center; margin-top: 20px"
                      @click="handleRedaMore"
                    >
                      收起
                    </div>
                  </div>
                  <div class="imgBox" v-show="isShow">
                    <div class="num">
                      <el-statistic :value="outputValue" />
                      <span>份</span>
                    </div>
                  </div>
                  <div v-show="isShow">
                    <div>
                      <div><mytitlebar title="专业要求" /></div>
                      <div
                        class="df"
                        style="
                          justify-content: space-between;
                          align-items: normal;
                        "
                      >
                        <div style="width: 45%">
                          <careertable
                            :careerTableData="firstMajor"
                            :title="majorTitle"
                            :type="1"
                          />
                        </div>
                        <div style="width: 45%">
                          <careertable
                            :careerTableData="twoMajor"
                            :title="majorTitle"
                            :type="1"
                          />
                        </div>
                      </div>
                    </div>

                    <div>
                      <div><mytitlebar title="学历要求" /></div>
                      <div
                        class="df"
                        style="
                          justify-content: space-between;
                          align-items: normal;
                        "
                      >
                        <picChart :eduNeed="jorDetailsData.eduNeed" />
                        <barChart :eduNeed="jorDetailsData.eduNeed" />
                      </div>
                    </div>

                    <div>
                      <div><mytitlebar title="人才需求" /></div>
                      <div style="margin: 20px 0 10px 0">各省市招聘统计</div>
                      <div
                        class="df"
                        style="
                          justify-content: space-between;
                          align-items: normal;
                        "
                      >
                        <div style="width: 45%">
                          <careertable
                            :careerTableData="firstPro"
                            :title="porTitle"
                            :type="2"
                          />
                        </div>
                        <div style="width: 45%">
                          <careertable
                            :careerTableData="twoPro"
                            :title="porTitle"
                            :type="2"
                          />
                        </div>
                      </div>
                    </div>

                    <div>
                      <div><mytitlebar title="招聘企业" /></div>
                      <div
                        class="df"
                        style="
                          justify-content: space-between;
                          width: 100%;
                          align-items: normal;
                        "
                      >
                        <div style="width: 45%">
                          <div style="margin: 20px 0 10px 0">招聘企业类型</div>
                          <div>
                            <careertable
                              :careerTableData="jorDetailsData.companyType"
                              :type="3"
                            />
                          </div>
                        </div>

                        <div style="width: 45%">
                          <div style="margin: 20px 0 10px 0">优质招聘企业</div>
                          <careertable
                            :careerTableData="jorDetailsData.companyFine"
                            :type="4"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="f12" style="margin-top: 20px">
                      招聘数据来自国家大学生就业服务平台及各大招聘平台
                    </div>
                  </div>
                </el-tab-pane>

                <el-tab-pane
                  v-if="route.path != '/jorLibrary/jorLibraryDet/jorDet'"
                  label="就业岗位"
                  name="jiuyegangwei"
                >
                  <careertable :careerTableData="jboPositionData" :type="5" />
                </el-tab-pane>
                <el-tab-pane label="企业招聘" name="qiyezhaopin">
                  <enterprise-recruitment :jobCompanyData="jobCompanyData" />
                  <p v-if="loading" style="text-align: center">加载中...</p>
                  <p v-if="noMore" style="text-align: center">没有更多了</p>
                </el-tab-pane>
                <el-tab-pane
                  label="人才高校培养"
                  name="peiyang"
                  v-if="route.path != '/jorLibrary/jorLibraryDet/jorDet'"
                >
                  <collegeTable
                    v-show="schoolTableData.length != 0"
                    :tableData="schoolTableData"
                    @handleTableList="handleTableList"
                  />
                  <div
                    v-show="schoolTableData.length == 0"
                    style="text-align: center"
                  >
                    暂无数据
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import {
  getAllCareer,
  getCareerDetail,
  getCareerJobPosition,
  getCareerJobCompany,
} from '@/api/careerDetails/careerDet';
import { getSearchMajorSchool } from '@/api/majorDetails/majorDetails';
import mytitlebar from '@/views/majorLibraryDet/components/MyTitleBar.vue';
import careertable from '@/views/jorLibraryDet/components/CareerTable';
import picChart from '@/views/jorLibraryDet/components/PicChart.vue';
import barChart from '@/views/jorLibraryDet/components/BarChart.vue';
import collegeTable from '@/views/majorLibraryDet/components/CollegeTable';
import enterpriseRecruitment from '@/views/jorDet/components/EnterpriseRecruitment';
import { get } from 'lodash';
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const loading = ref(false);
const isNoMore = ref([]);
const noMore = computed(() => isNoMore.value.length <= 0);
const disabled = computed(() => loading.value || noMore.value);
const code = ref('');
const isShow = ref(true);
const expandedKeys = ref([]);
const activeName = ref('zhiyegaishu');
code.value = route.query.code;
const treeLoading = ref(false);
const treeData = ref([]);
const majorTitle = ref(['排位', '专业名称', '专业占比', '趋势']);
const porTitle = ref(['排位', '省份', '招聘人数', '占比', '薪资范围']);
import { useTransition } from '@vueuse/core';
const handleExpandedKey = () => {
  expandedKeys.value.push(code.value);
};
handleExpandedKey();
const firstMajor = ref([]);
const twoMajor = ref([]);
const firstPro = ref([]);
const twoPro = ref([]);
const jorDetailsData = ref({});
const sorce = ref(0);
// 数字计步器
const outputValue = useTransition(sorce, {
  duration: 1500,
});
const handleRedaMore = () => {
  isShow.value = !isShow.value;
};
const jobPositionReqData = ref({
  page: 1,
  code: '',
});
const reqMajorSchoolData = ref({
  page: 1,
  pageSize: 10,
  code: '',
});

const jobCompanyReqData = ref({
  page: 1,
  pageSize: 10,
  code: '',
});
const load = () => {
  if (activeName.value == 'qiyezhaopin') {
    jobCompanyReqData.value.page++;
    fetchCareerJobCompany();
  }
};
const jobCompanyData = ref([]);
const fetchCareerJobCompany = () => {
  loading.value = true;
  jobCompanyReqData.value.code = code.value;
  getCareerJobCompany(jobCompanyReqData.value)
    .then((res) => {
      if (res.data.code == 20000) {
        isNoMore.value = res.data.data;
        jobCompanyData.value = [...jobCompanyData.value, ...res.data.data];
        loading.value = false;
        jobCompanyData.value.forEach((v) => {
          v.publishAt = v.publishAt.split('T')[0];
        });
      } else {
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
};
fetchCareerJobCompany();
const handleTreeName = (node, data) => {
  if (node.level == 1) {
    return;
  } else {
    if (node.level == 2) {
      router
        .push({
          path: '/jorLibrary/jorLibraryDet',
          query: {
            code: data.code,
            name: data.name,
          },
        })
        .then(() => {
          location.reload();
        });
    } else {
      router
        .push({
          path: '/jorLibrary/jorLibraryDet/jorDet',
          query: {
            code: data.code,
            name: data.name,
          },
        })
        .then(() => {
          location.reload();
        });
    }
  }
};
const handleTableList = () => {
  if ((activeName.value == 'peiyang') & (schoolTableData.value.length > 0)) {
    reqMajorSchoolData.value.page++;
    fetchSearchMajorSchool();
  } else {
    return;
  }
};
const schoolTableData = ref([]);
const fetchSearchMajorSchool = () => {
  reqMajorSchoolData.value.code = code.value;
  getSearchMajorSchool(reqMajorSchoolData.value).then((res) => {
    if (res.data.code == 20000) {
      schoolTableData.value = [...schoolTableData.value, ...res.data.data];
    }
  });
};
fetchSearchMajorSchool();

// 职业相关岗位
const jboPositionData = ref([]);
const fetchCareerJobPosition = () => {
  jobPositionReqData.value.code = code.value;
  getCareerJobPosition(jobPositionReqData.value).then((res) => {
    if (res.data.code == 20000) {
      jboPositionData.value = res.data.data;
    }
  });
};
fetchCareerJobPosition();
const fetchCareerDetail = () => {
  getCareerDetail({ code: code.value }).then((res) => {
    if (res.data.code == 20000) {
      jorDetailsData.value = res.data.data;
      sorce.value = get(jorDetailsData.value, 'value', 0);

      const { majorNeed = [], demandNeed = [] } = get(res, 'data.data', '{}');
      majorNeed.forEach((item, index) => {
        item.index = index;
      });
      demandNeed?.forEach((item, index) => {
        item.index = index;
      });
      firstMajor.value = majorNeed?.slice(0, 5);
      twoMajor.value = majorNeed?.slice(5, 10);
      firstPro.value = demandNeed?.slice(0, 5);
      twoPro.value = demandNeed?.slice(5, 10);
    }
  });
};
fetchCareerDetail();
const fetchAllCareer = () => {
  treeLoading.value = true;
  getAllCareer({ deep: 3 })
    .then((res) => {
      if (res.data.code == 20000) {
        treeLoading.value = false;
        treeData.value = res.data.data;
        foundItem.value = handleFindItem(treeData.value, code.value);
      } else {
        treeLoading.value = false;
      }
    })
    .catch(() => {
      treeLoading.value = false;
    });
};

fetchAllCareer();
const foundItem = ref([]);
// 使用 find() 方法查找匹配的数据项
const handleFindItem = (data, targetCode = []) => {
  const search = (data, targetCode, path) => {
    for (const item of data) {
      // 如果找到匹配项，则返回路径中的项
      if (item.code === targetCode) {
        return [...path, item];
      }
      // 如果有子项，则递归搜索
      if (item.children && item.children.length > 0) {
        const foundInChildren = search(item.children, targetCode, [
          ...path,
          item,
        ]);
        if (foundInChildren) {
          return foundInChildren;
        }
      }
    }
    // 如果未找到匹配项，则返回 null
    return null;
  };

  // 从根级数据开始搜索
  const pathToItem = search(data, targetCode, []);
  // 如果找到了目标项，则只返回目标项及其父级，不包含其他子项
  if (pathToItem) {
    const [targetItem, ...parents] = pathToItem;
    return [targetItem, ...parents];
  } else {
    return null;
  }
};
const defaultProps = {
  children: 'children',
  label: 'name',
};
</script>

<style lang="scss" scoped>
#jorLibraryDet {
  // margin-bottom: 300px;
  .main {
    .left-tree {
      // width: 260px;
      padding-right: 50px;
      margin-right: 30px;
      border: 1px solid #f2f2f2;
      .careeTreeHead {
        padding: 10px;
        border-bottom: 1px solid #f2f2f2;
      }
    }
    .right-contaier {
      // background: #fff7f4;
      height: 100%;
      margin-bottom: 150px;
      flex: 1;
      .like-box {
        padding: 15px;
        height: 100%;
        justify-content: space-between;
      }
    }
  }
}
.treeActive {
  color: var(--color-text);
}
.read-more {
  position: absolute;
  top: 64px;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 60%, #fff);
  text-align: center;
  line-height: 36px;
  color: #333;
  font-size: 14px;
  padding-top: 50px;
  cursor: pointer;
}
.tabs-box {
  :deep(.el-tabs__active-bar) {
    height: 0px !important;
  }
  :deep(.el-tabs__nav-wrap::after) {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-text);
    z-index: var(--el-index-normal);
  }
  :deep(.is-active) {
    background: var(--background-color);
    color: #fff;
    border-radius: 4px;
  }
  :deep(.el-tabs__item) {
    padding: 0 30px !important;
  }
}
.imgBox {
  width: 100%;
  height: 120px;
  margin-top: 10px;
  background-image: url('@/assets/images/imgBox.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .num {
    padding-top: 70px;
    width: 100%;
    height: 42px;
    line-height: 42px;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
</style>
